<template>
  <div class="register-page">
    <div class="container">
      <div class="register-container">
        <div class="form-container">
          <h1 class="page-title">注册</h1>
          
          <el-form 
            ref="registerForm" 
            :model="registerForm" 
            :rules="rules" 
            label-position="top"
            @submit.prevent="onSubmit"
          >
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="registerForm.username" 
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              />
            </el-form-item>
            
            <el-form-item label="电子邮箱" prop="email">
              <el-input 
                v-model="registerForm.email" 
                type="email"
                placeholder="请输入电子邮箱"
                prefix-icon="el-icon-message"
              />
            </el-form-item>
            
            <el-form-item label="姓名" prop="full_name">
              <el-input 
                v-model="registerForm.full_name" 
                placeholder="请输入您的姓名"
                prefix-icon="el-icon-user"
              />
            </el-form-item>
            
            <el-form-item label="电话（选填）" prop="phone">
              <el-input 
                v-model="registerForm.phone" 
                placeholder="请输入您的电话号码"
                prefix-icon="el-icon-phone"
              />
            </el-form-item>
            
            <el-form-item label="地址（选填）" prop="address">
              <el-input 
                v-model="registerForm.address" 
                type="textarea"
                :rows="2"
                placeholder="请输入您的地址"
              />
            </el-form-item>
            
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="registerForm.password" 
                type="password" 
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password
              />
            </el-form-item>
            
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input 
                v-model="registerForm.confirmPassword" 
                type="password" 
                placeholder="请再次输入密码"
                prefix-icon="el-icon-lock"
                show-password
              />
            </el-form-item>
            
            <div class="form-actions">
              <el-button 
                type="primary" 
                :loading="loading" 
                @click="onSubmit"
                class="submit-btn"
              >
                注册
              </el-button>
            </div>
          </el-form>
          
          <div class="form-footer">
            <p>已有账号? <router-link to="/login">立即登录</router-link></p>
          </div>
        </div>
        
        <div class="image-container">
          <div class="image-overlay">
            <h2>加入我们</h2>
            <p>成为宠物领养平台的一员，开始您的爱心之旅</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'Register',
  data() {
    // 密码确认验证
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };
    
    return {
      registerForm: {
        username: '',
        email: '',
        full_name: '',
        phone: '',
        address: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在3到20个字符之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的电子邮箱地址', trigger: 'blur' }
        ],
        full_name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^[0-9\-+\s]{5,20}$/, message: '请输入有效的电话号码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      loading: 'isLoading',
      error: 'error'
    })
  },
  methods: {
    ...mapActions({
      register: 'auth/register',
      setError: 'setError'
    }),
    async onSubmit() {
      try {
        await this.$refs.registerForm.validate();
        
        const userData = {
          username: this.registerForm.username,
          email: this.registerForm.email,
          full_name: this.registerForm.full_name,
          phone: this.registerForm.phone || null,
          address: this.registerForm.address || null,
          password: this.registerForm.password
        };
        
        const success = await this.register(userData);
        
        if (success) {
          // 注册成功，跳转到首页
          this.$router.push('/');
          
          this.$message({
            message: '注册成功！欢迎加入宠物领养平台！',
            type: 'success'
          });
        }
      } catch (error) {
        // 表单验证失败
        console.error('Form validation failed');
      }
    }
  },
  // 在组件销毁前清除错误信息
  beforeUnmount() {
    if (this.error) {
      this.setError(null);
    }
  }
}
</script>

<style lang="scss" scoped>
.register-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  padding: 40px 0;
}

.register-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  overflow: hidden;
  min-height: 600px;
}

.form-container {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.image-container {
  flex: 1;
  background-image: url('https://images.unsplash.com/photo-1564497717650-489eb99389b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
}

.image-overlay {
  position: relative;
  color: white;
  text-align: center;
  padding: 20px;
  
  h2 {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  
  p {
    font-size: 1.2rem;
  }
}

.form-actions {
  margin-top: 20px;
}

.submit-btn {
  width: 100%;
}

.form-footer {
  margin-top: 20px;
  text-align: center;
  
  a {
    color: var(--primary-color);
    font-weight: bold;
  }
}

@media (max-width: 768px) {
  .register-container {
    flex-direction: column-reverse;
  }
  
  .image-container {
    height: 200px;
  }
}
</style> 